<template>
  <view v-if="isShow">
    <view @click="close" :class="{'date-mask-show': timeMaskShow}" class="date-mask"></view>
    <view :class="{'fadelogIn': timeMaskShow}" class="date">
      <view class="date-title u-flex u-row-between">
        <view @click="close" class="btn close">取消</view>
        <view class="title u-flex-1 u-font-30 u-text-center">{{title}}</view>
        <view @click="confirm" class="btn confirm">确认</view>
      </view>
      <view class="date-list u-font-30 u-text-center u-flex">
        <view class="item u-flex-1" v-for="(item,index) in tabList" :key="index">{{item}}</view>
      </view>
      <view class="date-select u-m-t-30">
        <swiper class="swiper">
          <swiper-item>
            <picker-view @change="bindChange" :indicator-style="indicatorStyle" :value="pickerValue" class="swiper-item">
              <picker-view-column>
                <view v-for="(item,index) in startList" :key="index" class="item u-flex u-col-center u-row-center">{{item}}年</view>
              </picker-view-column>
              <picker-view-column>
                <view v-for="(item,index) in endList" :key="index" class="item u-flex u-col-center u-row-center">{{item}}年</view>
              </picker-view-column>
            </picker-view>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "com-date",
  data() {
    return {
      isShow: false,
      timeMaskShow: false,
      tabList: ["入学年份", "（预计）毕业年份"],
      startDate: "",
      endDate: "",
      indicatorStyle: "height: 50px;",
      pickerValue: [],
      startList: [],
      endList: [],
    };
  },
  props: {
    title: {
      type: String,
      default: "时间段",
    },
  },
  mounted() {
    let year = new Date().getFullYear();
    for (let i = 0; i <= 1; i++) {
      this.pickerValue.push(80 - (2030 - year));
    }
    let array = [];
    for (let i = 1950; i <= 2030; i++) {
      array.push(i);
    }
    this.startList = array;
    this.endList = array;
  },
  methods: {
    // 选择时间段
    bindChange(e) {
      let array = e.detail.value;
      this.startDate = array[0];
      this.endDate = array[1];
    },
    // 确认按钮
    confirm() {
      if (this.startDate >= this.endDate)
        return this.$u.toast("结束时间要大于开始时间~");
      this.$emit("confirm", {
        startDate: `${this.startDate + 1950}年`,
        endDate: `${this.endDate + 1950}年`,
      });
      this.close();
    },
    // 打开日历弹窗
    open() {
      this.isShow = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.timeMaskShow = true;
        }, 50);
      });
    },
    // 关闭弹窗
    close() {
      this.timeMaskShow = false;
      this.$nextTick(() => {
        setTimeout(() => {
          this.isShow = false;
          this.$emit("close");
        }, 500);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.date-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $uni-bg-color-mask;
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity: 0;
  /* #ifndef APP-NVUE */
  z-index: 999;
  /* #endif */
}

.date {
  position: fixed;
  bottom: calc(var(--window-bottom));
  right: 0;
  left: 0;
  z-index: 1000;
  height: 750rpx;
  background-color: $uni-bg-color;
  transition-property: transform;
  transition-duration: 0.3s;
  transform: translateY(460px);

  &-title {
    height: 80rpx;

    .btn {
      width: 100rpx;
      color: $uni-text-color-grey;
      font-size: 28rpx;
      text-align: center;

      &.confirm {
        color: $uni-text-color-main;
      }
    }

    .title {
      font-weight: bold;
    }
  }

  &-list {
    height: 70rpx;
  }

  &-select {
    .swiper {
      height: 500rpx;
    }

    .swiper-item {
      height: 500rpx;

      .item {
        height: 50px;
      }
    }
  }
}

.date-mask-show {
  opacity: 1;
}

.fadelogIn {
  transform: translateY(0);
}
</style>